<template>
    <div class="page-func-drag-resize">
        <base-box height="600px" class="grid">
            <base-drag-resize
                v-for="(item, index) in list"
                :key="index"
                :w="item.w"
                :h="item.h"
                :x="item.x"
                :y="item.y"
                class="resize-item flex-center"
            >
                <span class="index">{{ index + 1 }}</span>
            </base-drag-resize>
        </base-box>
    </div>
</template>

<script lang="ts" setup>
const list = ref([
    {
        w: 150,
        h: 150,
        x: 0,
        y: 0
    },
    {
        w: 150,
        h: 150,
        x: 200,
        y: 100
    }
]);
</script>

<style lang="scss" scope>
.grid {
    background: url("");
    .resize-item {
        background-color: var(--el-color-primary);

        .index {
            font-size: 35px;
            color: #fff;
        }
    }
}
</style>
